import React, {useState } from 'react';
import { user_login} from '../../api/login/login';
import './login.scss';
import {Button,notification} from 'antd';
import { useNavigate} from 'react-router-dom';
const Login = () => {
    // 双向绑定输入框的value
    const [LogValue, setLogValue] = useState({
        phone: '',
        pass: ''
    })
    const inputValue = (e) => {
        // 动态添加输入框的值到对象中
        LogValue[e.target.name] = e.target.value;
        setLogValue({ ...LogValue });
    }
    let navigate = useNavigate();
    // 登录
    function handleLog() {
        if (LogValue.phone == false) {          
            notification.error({ message:'请输入手机号!' });
        } else if (/^1[3-9]\d{9}$/.test(LogValue.phone) == false) {
            notification.error({ message:'请输入正确的手机号!' });
        } else if (LogValue.pass == false) {
            notification.error({ message:'请输入密码!' });
        } else {
            user_login(`?phone=${LogValue.phone}&pass=${LogValue.pass}`).then((res)=>{
                console.log(res.data);
                if(res.data.length == 1){
                    localStorage.setItem('userInfo',JSON.stringify(res.data[0]));
                    notification.success({ message: '登录成功' }); 
                    navigate('/index');
                }else if(res.data.length == 0){
                    notification.error({ message: '账号或密码不正确' });
                }
            })
        }

    }
    // 去注册
    function gores(){                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
        navigate('/register');
    }
    return (
        <div className='login'>
            <div className="input-lo">
                <div className="phone">
                    <input type="text" name='phone' placeholder='请输入手机号' onChange={(e) => inputValue(e)} value={LogValue.phone} />
                </div>
                <div className="name">
                    <input type="password" name='pass' placeholder='请输入密码' onChange={(e) => inputValue(e)} value={LogValue.name} />
                </div>
                <div className="go-lo" onClick={handleLog} >登录</div>
                <Button type="primary" onClick={gores} className='reg' >注册</Button>
            </div>

        </div>
    );
}
export default Login;
